<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; max-height: 20px">
      <h5>采购方式</h5>
      <el-select v-model="procurementMethod" placeholder="请选择" style="margin-top: -5px;margin-left: 10px; width: 120px">
        <el-option :key="''" :label="'全部'" :value="''"></el-option>
        <el-option :key="'磋商'" :label="'磋商'" :value="'磋商'"></el-option>
        <el-option :key="'委托'" :label="'委托'" :value="'委托'"></el-option>
        <el-option :key="'竞价'" :label="'竞价'" :value="'竞价'"></el-option>
      </el-select>
      <h5 style="margin-left: 30px">项目编号</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目编号" v-model="projectNumber"></el-input>
      <h5 style="margin-left: 30px">项目名称</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目名称" v-model="projectName" ></el-input>
      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex; max-height: 50px">
      <el-button type="primary" @click="exp" style="margin-top: 15px">导出所有项目<i class="el-icon-top"></i></el-button>
      <el-button type="primary" @click="exportExcel" style="margin-top: 15px">导出当前页项目<i class="el-icon-top"></i></el-button>
      <el-popconfirm
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定要删除这些吗？"
          @confirm ="delproject"
      >
        <el-button type="danger" slot="reference" style="margin-top: 15px;margin-left: 10px">批量删除<i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
    </div>
    <div style="display: flex;">
      <el-table :data="tableData" style="width: 100%" height="500" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column fixed prop="projectNumber" label="项目编号" width="120"></el-table-column>
        <el-table-column fixed prop="projectName" label="项目名称" width="150"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="50"></el-table-column>
        <el-table-column prop="budget" label="预算（万元）" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" effect="circle">待进行</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning" effect="circle">待公告</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success" effect="circle">已公告</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="info" effect="circle">待公示</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="primary" effect="circle">已公示</el-tag>
            <el-tag v-else type="success" effect="circle">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="procurementType" label="采购类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementType === '公开采购'">公开采购</span>
            <span v-else-if="scope.row.procurementType === '单一来源'">单一来源</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="fundingSource" label="资金来源" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.fundingSource === '预算'">预算</span>
            <span v-else-if="scope.row.fundingSource === '拨款'">拨款</span>
            <span v-else-if="scope.row.fundingSource === '其他'">其他</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyingDepartment" label="申请科室" width="100"></el-table-column>
        <el-table-column prop="applicant" label="申请人" width="100"></el-table-column>
        <el-table-column prop="procurementMethod" label="采购方式" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementMethod === '磋商'">磋商</span>
            <span v-else-if="scope.row.procurementMethod === '委托'">委托</span>
            <span v-else-if="scope.row.procurementMethod === '竞价'">竞价</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectType" label="项目类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.projectType === '工程'">工程</span>
            <span v-else-if="scope.row.projectType === '耗材'">耗材</span>
            <span v-else-if="scope.row.projectType === '设备'">设备</span>
            <span v-else-if="scope.row.projectType === '维护'">维护</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="tenderOfficer" label="招标责任人" width="100"></el-table-column>
        <el-table-column prop="meetingRoom" label="会议室" width="100"></el-table-column>
        <el-table-column prop="publishDate" label="发布日期" width="100"></el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 800px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getProjectPage,
  deleteProject
} from '@/api/project'
import {serverIp} from "../../../../public/config.js";
import * as XLSX from "xlsx";

export default {
  name: "PurchProj",
  data() {
    return {
      procurementMethod:'',
      projectNumber: "",
      projectName: "",
      tableData: [],
      pageNum: 1,
      total: 0,
      pageSize: 10,
      multipleSelection: [],
    }
  },
  created() {
    this.init()
  },
  methods: {
    //初始化页面
    init() {
      getProjectPage(this.pageNum, this.pageSize,this.projectNumber,this.projectName,this.procurementMethod)
          .then(res => {
            this.tableData = res.records;
            this.total = res.total;
          })
          .catch(err => {
            this.$message.error('请求出错了');
          });
    },
    // 删除项目
    delproject() {
      let ids = this.multipleSelection.map(v => v.projectId)//将multipleSelection中的对象转换成数组
      deleteProject(ids).then(res => {
        if(res) {
          this.$message.success('删除成功')
          this.init()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    exp() {
      window.open(`http://${serverIp}:8081/jdyfy/project/export`)
    },
    exportExcel() {
      // 将表格数据转化为 Excel 格式
      const headers = ['项目编号', '项目名称', '数量', '预算（万元）', '状态', '采购方式','采购类型','资金来源','申请科室','申请人','项目类型','招标负责人'];
      const rows = this.tableData.map(item => [
        item.projectNumber,
        item.projectName,
        item.quantity,
        item.budget,
        this.getStatusText(item.status),
        item.procurementMethod,
        item.procurementType,
        item.fundingSource,
        item.applyingDepartment,
        item.applicant,
        item.projectType,
        item.tenderOfficer
      ]);

      // 创建一个工作表并转化为工作簿
      const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '项目数据');

      // 导出 Excel 文件
      XLSX.writeFile(wb, '项目数据.xlsx');
    },
    getStatusText(status) {
      // 将状态数字转化为文本
      switch (status) {
        case 0: return '待进行';
        case 1: return '待公告';
        case 2: return '已公告';
        case 3: return '待公示';
        case 4: return '已公示';
        case 5: return '已完成';
        case 6: return '已归档';
      }
    },
    handleSelectionChange(val) {//选中选择框时会返回选择框的信息到val
      this.multipleSelection = val
    },
    // 改变页码
    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 改变每页显示条数
    handleCurrentChange(val) {
      this.pageNum = val;
      this.init();
    },
    //重置按钮
    reset() {
      this.procurementMethod = ''
      this.projectNumber = "";
      this.projectName = "";
      this.init();
    }
  }
}
</script>

<style scoped>

</style>